@font-face {
  font-family: MyFontName;
  src: url(./LongCang-Regular.ttf);
}
* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #06181f;
}
.container {
  position: relative;
  width: 800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .icon {
  width: 200px;
}
.container .icon path {
  fill: transparent;
  stroke-width: 10;
  stroke: #31e8ff;
}
/* 心 */
.container .icon.heart path {
  stroke-dasharray: 1530;
  stroke-dashoffset: 0;
}
.container .icon.heart:hover path {
  animation: animate-heart 1s linear forwards;
}
@keyframes animate-heart {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 1530;
  }
  80% {
    stroke-dashoffset: 3060;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 3060;
    fill: #31e8ff;
  }
}
/* 星星 */
.container .icon.star path {
  stroke-dasharray: 1810;
  stroke-dashoffset: 0;
}
.container .icon.star:hover path {
  animation: animate-star 1s linear forwards;
}
@keyframes animate-star {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 1810;
  }
  80% {
    stroke-dashoffset: 3620;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 3620;
    fill: #31e8ff;
  }
}
/* 月亮 */
.container .icon.moon path {
  stroke-dasharray: 1550;
  stroke-dashoffset: 0;
}
.container .icon.moon:hover path {
  animation: animate-moon 1s linear forwards;
}
@keyframes animate-moon {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 1550;
  }
  80% {
    stroke-dashoffset: 3100;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 3100;
    fill: #31e8ff;
  }
}

.content {
  color: #fff;
  padding-top: 50px;
}
.content a {
  color: #fff;
}
.content .ttf {
  font-family: MyFontName;
  color: aquamarine;
  font-size: 30px;
}
